import React, { useState, useMemo, useEffect } from "react";
import styles from "./index.less";
import CommonHead from "@/components/CommonHead";
import { useSearchParams, useNavigate } from "umi";
import axios from '@/utils/request'
export default function Page() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  // 控制排序状态
  const [orderStatus, setOrderStatus] = useState({
    orderIndex: 0, // 0 销量 1 价格 2 新品
    upDown: 0, // 0 升序 1降序
  });
  // orderBy 请求排序的参数 根据 orderStatus计算得到
  const orderBy = useMemo(() => {
    let order = "ordersDown";
    switch (orderStatus.orderIndex) {
      case 0: // 按照销量降序
        order = "ordersDown";
        break;
      case 1: // 按照价格
        if (orderStatus.upDown === 0) {
          order = "priceUp";
        } else {
          order = "priceDown";
        }
        break;
      case 2: // 发布时间  新品
        order = "addedDown";
        break;
      default:
        break;
    }

    return order;
  }, [orderStatus]);
  // 点击 排序栏切换排序状态
  const switchOrder = (orderIndex: number) => {
    /* 
      判断 切换高亮 状态 是不是 和当前高亮状态不一致
    */
    if (orderIndex !== orderStatus.orderIndex) {
      // 现在不是按照 现在排序，切换到 该排序上 定义不同排序升序降序初始值
      /* 
        根据需求：价格不同排序规则 升序降序初始值不同，在这里判断 什么排序定义初始值 
      */
      setOrderStatus({
        orderIndex,
        upDown: 0,
      });
    } else {
      // 点击切换排序 和 目前排序是一致  现在 切换升序和降序
      if (orderStatus.upDown === 0) {
        setOrderStatus({
          orderIndex,
          upDown: 1,
        });
      } else {
        setOrderStatus({
          orderIndex,
          upDown: 0,
        });
      }
    }
  };

  // 请求商品列表
  const [items, setItems] = useState<ItemType[]>([]);
  const fetchItems = () => {
    axios.post('/shop/goods/list/v2', {
      categoryId: searchParams.get('cateId'),
      orderBy
    }).then(res => {
      if (res.data.code === 0) {
        setItems(res.data.data.result)
      }
    })
  }
  useEffect(() => {
    fetchItems()
  }, [orderBy])
  // 跳转到详情
  const enterDetail = (id: number) => {
    navigate(`/detail/${id}`)
  }
  return (
    <div className={styles["cate-page"]}>
      <CommonHead title="商品列表" />
      <div className="order-container">
        <div
          onClick={() => {
            switchOrder(0);
          }}
          className={`order sale ${
            orderStatus.orderIndex === 0 ? "active" : ""
          }`}
        >
          <span>销量</span>
        </div>
        <div
          onClick={() => {
            switchOrder(1);
          }}
          className={`order price ${
            orderStatus.orderIndex === 1 ? "active" : ""
          }`}
        >
          <span>价格</span>
          <div
            className={`triangle up ${
              orderStatus.orderIndex === 1 && orderStatus.upDown === 0
                ? "active"
                : ""
            }`}
          ></div>
          <div
            className={`triangle down ${
              orderStatus.orderIndex === 1 && orderStatus.upDown === 1
                ? "active"
                : ""
            }`}
          ></div>
        </div>
        <div
          onClick={() => {
            switchOrder(2);
          }}
          className={`order new ${
            orderStatus.orderIndex === 2 ? "active" : ""
          }`}
        >
          <span>新品</span>
        </div>
      </div>
      <div className="cate-container">
      <div className="items">
          {items.map((item: ItemType) => (
            <div className="item" onClick={
              () => {
                enterDetail(item.id)
              }
            } key={item.id}>
              <img src={item.pic} alt="" className="item-img" />
              <div className="item-info">
                <h5>{item.name}</h5>
                <p className="price">{item.minPrice}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
